<template>
	<!-- 活动报名  -->
	<view class="signUp" v-if="activityIDList && activityIDList.length != 0 && isActivityIDList">
		<!-- <view class="bg_top" :style="'height:'+(2*menuButtonInfo.top+48)+'rpx'"></view>
		<view class="top z_index" :style="'padding-top:'+ menuButtonInfo.top + 'px'">
			<u-icon @click="goNavigateBack" class="top_icon" name="arrow-left" color="#000000" size="40"></u-icon>
			<view class="top_title">活动报名</view>
		</view> -->
		<!-- <view class="signUp_content" :style="'padding-top:'+ (2*menuButtonInfo.top+48) + 'rpx'"> -->
		<view class="signUp_content">
			<view class="signUp_content_image"><image :src="activityIDList.imageList[0]"></image></view>
			<view class="signUp_content_">
				<view class="signUp_content_title">{{activityIDList.activityName}}</view>
				<view class="signUp_content_icon">
					<image :src="activityIDList.categoryImage"></image>
					<!-- <text>{{activityIDList.categoryName}}</text> -->
				</view>
				<view class="signUp_content_details">
					<view class="content_detailed_time">
						<image src="https://z3.ax1x.com/2021/08/27/hQDVdx.png"></image>
						<view>{{$Tools.startToEnd(activityIDList.timeStart,activityIDList.timeEnd)}}</view>
					</view>
					<view class="content_detailed_position">
						<image src="https://z3.ax1x.com/2021/08/27/hQ6nHA.png"></image>
						<view>{{activityIDList.address}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="splitLine"></view>
		<view class="form">
			<view v-for="(item, index) in activityIDList.formFieldList" :key="index">
				<view class="form_"><text v-if="item.required" class="form_text">*</text>{{item.label}}</view>
				<!-- <view class="form_">{{item.label}}</view> -->
								
				<view class="form_region" v-if="item.tag == 'el-select'">
					<input :value="showValue(item.filedId)" class="form_input" type="text" :placeholder="item.placeholder" :disabled="true" @click="getSelect" />
					<image class="form_region_image" src="https://z3.ax1x.com/2021/08/28/h1t039.png"></image>
					<u-select @confirm="confirmSelect($event, item.filedId)" v-model="showSelect" :list="item.optionList"></u-select>
				</view>
				
				<view class="form_region" v-else-if="item.tag == 'el-address' && optionListAddress">
					<input :value="showValue(item.filedId)" class="form_input" type="text" :placeholder="item.placeholder" :disabled="true" @click="getAddressSelect" />
					<image class="form_region_image" src="https://z3.ax1x.com/2021/08/28/h1t039.png"></image>
					<u-select @confirm="confirmAddressSelect($event, item.filedId)" mode="mutil-column-auto" v-model="showAddressSelect" :list="optionListAddress"></u-select>
				</view>
				
				
				<view class="form_input_checkbox" v-else-if="item.tag == 'el-checkbox-group'">
					<checkbox-group  @change="checkboxChange($event, item.filedId, item.optionList)">
						<label class="uni-list-cell uni-list-cell-pd" v-for="(item1, index1) in item.optionList" :key="index1">
							<view>
								<checkbox color="red" :value="index1" :checked="item1.checked" />
							</view>
							<view>{{item1.label}}</view>
						</label>
					</checkbox-group>
				</view>
				
				<view class="" v-else-if="item.tag == 'el-upload'">
					<view class="image">
						<u-upload ref="uUpload" :auto-upload="false" del-bg-color="rgba(255,255,255,0)" class="addBtn_" :custom-btn="true" width="182" height="182" :max-count="9"  @on-choose-complete="onChange($event, item.filedId)">
							<view slot="addBtn" class="addBtn">
								<u-icon name="plus" color="#909499" size="48"></u-icon>
							</view>
						</u-upload>
					</view>
				</view>
				
				<view class="form_region" v-else-if="item.tag == 'el-date-picker'">
					<input :value="showValue(item.filedId)" class="form_input" type="text" :placeholder="item.placeholder" :disabled="true" @click="toShowDate" />
					<image class="form_region_image" src="https://z3.ax1x.com/2021/08/28/h1t039.png"></image>
					<u-calendar v-model="showDate" max-date="2025-12-30" mode="date" @change="changeDate($event, item.filedId)"></u-calendar>
				</view>
				
				
				<view class="" v-else-if="item.tag == 'el-input' && item.tagIcon == 'textarea'">
					<textarea @blur="blurTextarea($event, item.filedId)" :placeholder="item.placeholder" :auto-height="true" class="textarea" />
				</view>
				
				<view class="form_region" v-else-if="item.tag == 'el-radio-group'">
					<view class="radio">
					
						<u-radio-group class="radio_" size="40" active-color="red"  @change="radioGroupChange($event, item.filedId, item.optionList)">
							<u-radio class="radio_1" icon-size="25" label-size="30" :name="item1.value" v-for="(item1, index1) in item.optionList" :key="index">{{item1.label}}</u-radio>
						</u-radio-group>
					</view>
				</view>
				
				<view class="" v-else-if="item.tag == 'el-input' && item.tagIcon == 'input'">
					<input class="form_input" type="text" :placeholder="item.placeholder" @blur="blurInput($event, item.filedId)" />
				</view>
				
				
				<!-- <input v-else-if="item.tag == 'input'" class="form_input" type="text" :placeholder="item.placeholder" v-model="signUpUser.name" @blur="blurInputSetStorage" /> -->
			</view>
			
			<!-- <view class="form_">手机</view>
			<input class="form_input" type="text" placeholder="请输入你的手机号" v-model="signUpUser.phone" @blur="blurInputSetStorage" />
			
			<view class="form_">邮箱</view>
			<input class="form_input" type="text" placeholder="请输入你的邮箱" v-model="signUpUser.mailbox" @blur="blurInputSetStorage"/>
			
			<view class="form_">所在地区</view>
			<view class="form_region">
				<input :value="signUpUser.region" class="form_input" type="text" placeholder="请选择你所在的地区" :disabled="true" @click="getPoition" />
				<image src="https://z3.ax1x.com/2021/08/28/h1t039.png"></image>
				<u-picker v-model="showPoition" mode="region" @confirm="confirmPoition"></u-picker>
			</view> -->
		</view>
		<view class="foot">
			<view class="foot_title" @click="baoming">提交</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valuePosition: '',
				// menuButtonInfo: {
				// 	top: 25
				// },
				signUpUser:{
					name: '',
					phone: '',
					mailbox: '',
					region: ''
				},
				formFieldListApi: [],
				showPoition: false,
				activityIDList: [],
				showSelect: false,
				showAddressSelect: false,
				ossSignData: {},	//上传步骤一
				imageUrlList: [],//上传图片url集合
				showDate: false,
				optionListAddress: [], // 联动数据
				isActivityIDList: false
			}
		},
		onLoad(param) {
			this.init(param)
		},
		methods: {
			init(param) {
				// // #ifndef H5 || APP-PLUS || MP-ALIPAY
				// this.menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				// // #endif
				
				console.log(param)
				// 获取缓存的报名信息
				uni.getStorage({
					key: 'signUpUser',
					success: res => {
						// console.log("res", res)
						this.signUpUser = res.data
					}
				})
				
				this.$apis.activity(
					param.activityId
				).then(res => {
					this.activityIDList = res.data
					if(this.activityIDList.formFieldList) {
						this.activityIDList.formFieldList.forEach((item, index) => {
							if(item.tag == 'el-checkbox'){
								item.optionList.forEach((item1,index1) => {
									item1.checked = false
								})
							}
						})
						
						this.activityIDList.formFieldList.forEach((item, index) => {
							this.formFieldListApi.push({
								filedId: item.filedId,
								required: item.required,
								defaultValue: '',
								delData: '',
								defaultValueStr: '',
								label: item.label
							})
						})
						
					}
					this.isActivityIDList = true
					
					console.log("活动详情", res.data)
					console.log(res.data.formFieldList)
				})
				
				this.$apis.ossSign().then(res => {
					this.ossSignData = res.data
					console.log("图片上传1：this.ossSignData", this.ossSignData)
				})
				
				let op =[]
				
				//  获取全部地区
				this.$apis.regionList().then(res => {
					console.log("获取全部地区", res.data)
					let o_ = res.data
					o_.forEach((item, index) => {
						op.push({
							value: item.id,
							label: item.name,
							children: []
						})
						item.addressList.forEach((item1, index1) => {
							op[index].children.push({
								value: item1.id,
								label: item1.name,
								children: []
							})
							// console.log("item1",item1)
							if(Array.isArray(item1.addressList)){
								item1.addressList.forEach((item2, index2) => {
									op[index].children[index1].children.push({
										value: item2.id,
										label: item2.name,
									})
								})
							}
							
						})
					})
					// debugger
					this.optionListAddress = op
					console.log("this.optionListAddress",this.optionListAddress)
					// this.$forceUpdate()
				})
				
			},
			baoming(){
				console.log("提交的数据", this.signUpUser)
				let v = this.formFieldListApi
				for(let i=0; i < v.length; i++){
					console.log("this.formFieldListApi[i]",this.formFieldListApi[i])
					if(this.formFieldListApi[i].required){
						if(this.formFieldListApi[i].defaultValue == ''){
							console.log("this.formFieldListApi[i]",this.formFieldListApi[i])
							uni.showToast({
								title: v[i].label + " 不能为空",
								// title: "第" + (1+i) + "项不能为空",
								icon: "none"
							})
							return
						}
					}
				}
				
				
				this.$apis.orderJoin({
						activityId: this.activityIDList.activityId,
						formFieldList: this.formFieldListApi
					}).then(res => {
						
					uni.requestSubscribeMessage({
					  tmplIds: ['p2gClNHSPvK2h8pT9bkreXNBnth8plrPwKA6pgDGy6w', 'moKS8MHr_jbJyIU1yWp0tsl9MgaQcOmjKThD5VSB0-g'],
					  complete:ress=>{
					  	console.log("complete", ress.p2gClNHSPvK2h8pT9bkreXNBnth8plrPwKA6pgDGy6w)
					  	// 拒
					  	if(ress.p2gClNHSPvK2h8pT9bkreXNBnth8plrPwKA6pgDGy6w == 'reject'){
					  		uni.showToast({
					  			title: "提交失败",
					  			icon:'error',
					  			duration: 2500
					  		})
					  	}else if(ress.p2gClNHSPvK2h8pT9bkreXNBnth8plrPwKA6pgDGy6w == 'accept'){
					  			uni.showToast({
					  				title: "报名已提交",
					  				duration: 2000,
					  				success: res => {
					  					setTimeout(() => {
					  						uni.navigateBack()
					  					},1800)
					  				}
					  			})
					  	}
					  }
					
					})
				})
			},
			goNavigateBack(){
				uni.navigateBack()
			},
			blurInputSetStorage() {
				console.log("user", this.signUpUser)
				uni.setStorage({
					key: 'signUpUser',
					data: this.signUpUser
				})
			},
			getPoition() {
				this.showPoition = !this.showPoition
			},
			getSelect() {
				this.showSelect = !this.showSelect
			},
			getAddressSelect(){
				// console.log("optionListAddress", this.optionListAddress)
				this.showAddressSelect = !this.showAddressSelect
			},
			confirmPoition(e) {
				this.valuePosition = e.province.label + '·' + e.city.label + '·' + e.area.label
				this.signUpUser.region = this.valuePosition
			},
			checkboxChange(e, id, itemValue){
				let value = []
				let delData = []
				let detailValue = e.detail.value
				itemValue.forEach((item, index) => {
					let i = detailValue.indexOf(index.toString())
					if(i != -1){
						value.push(item.value)
						delData.push(item.label)
					}
				})
				value = value.join(",")
				delData = delData.join(",")
				this.setFormFieldListApi(id, value, delData)
				
				
				// let value = e.detail.value
				// value = value.join(",")
				// this.setFormFieldListApi(id, value)
				
			},
			onChange(e, id) {
				uni.showLoading({
					title: "上传中..."
				})
				console.log("onChange", e)
				let _e = e
				let config = this.ossSignData
				config.token = uni.getStorageSync('token')
				// config.key = parseInt(Math.random()*100000000000000)
				// config.key = this.$Tools.randomWord(true, 10-24)
				config.key = new Date().getTime()
				let imageUrlList = []
				
				let tempFilePath_ = ''
				_e.forEach( (item, index) => {
					console.log("item.file.path",item.file.path,)
					uni.compressImage({
						src: item.file.path,
						quality: 4,
						// width: "10%",
						success: res => {
							console.log("压缩成功", res.tempFilePath)
							tempFilePath_ = res.tempFilePath
							console.log("压缩成功1231231")
							uni.uploadFile({
								url: this.$config.url + "/client-api/common/checkImage",
								header: {
									Authorization: config.token
								},
								file: item.file,
								// filePath: item.file.path,
								filePath: tempFilePath_,
								name: 'file',
								success: res => {
									let _res 
									if(typeof(res.data) == 'string'){
										_res = JSON.parse(res.data)
									}
									// let _res = JSON.parse(res.data)
									if(_res.code === 503){
										if(index == _e.length-1){
											uni.hideLoading()
										}
										this.$refs.uUpload.remove(index);
										uni.showToast({
											title: "第"+ (index+1) +"张图片不合法 已删除",
											icon: "none"
										})
									}else {
										uni.uploadFile({
											url: config.host,
											file: item.file,
											// filePath: item.file.path,
											filePath: item.file.path,
											name: "file",
											formData: {
												'key': config.dir + "/" + config.key + index +".jpg",
												'policy': config.policy,
												'OSSAccessKeyId': config.accessid,
												'signature': config.signature,
												'success_action_status': '200',
												'callback': config.callback,
												'x:auth': config.token,
												'x:owner_type': 2
											},
											success: resFile => {
												console.log("上传成功：resFile", resFile)
												console.log("res.data", typeof(resFile.data))
												let _resFile = JSON.parse(resFile.data)
												console.log("上传成功：头像", _resFile.data.filename)
												imageUrlList.push(_resFile.data.filename)
												this.imageUrlList = imageUrlList
												this.imageUrlList = this.imageUrlList.join(",")
												console.log("图片集合：", this.imageUrlList)
												this.setFormFieldListApi(id, this.imageUrlList, this.imageUrlList)
												
												if(index == _e.length-1){
													uni.hideLoading()
												}
											},
											fail: err => {
												if(index == _e.length-1){
													uni.hideLoading()
												}
											}
										})
										
									}
								}
							})
						},
						fail: err => {
							console.log("压缩=======", err)
						}
					})
					
				})
			},
			confirmSelect(e, id){
				let value = e[0].value
				let delData = e[0].label
				value = value.toString()
				this.setFormFieldListApi(id, value, delData)
			},
			confirmAddressSelect(e,id){
				let value =  e[0].value + '-' + e[1].value + '-' + e[2].value
				let delData = e[0].label + '-' + e[1].label + '-' + e[2].label
				value = value.toString()
				this.setFormFieldListApi(id, delData, delData)

			},
			toShowDate(){
				this.showDate = !this.showDate
			},
			changeDate(e,id){
				let value = e.result
				this.setFormFieldListApi(id, value, value)
				
			},
			blurTextarea(e,id){
				let value = e.detail.value
				this.setFormFieldListApi(id, value, value)
			},
			radioGroupChange(e, id, itemValue){
				let value = ''
				let delData = ''
				itemValue.forEach((item, index) => {
					if(item.value == e){
						value = item.value
						delData = item.label
					}
				})
				console.log("单选e", e)
				console.log("itemValuee", itemValue)
				this.setFormFieldListApi(id, value, delData)
			},
			blurInput(e,id){
				let value = e.detail.value
				this.setFormFieldListApi(id, value, value)
			},
			
			setFormFieldListApi(id, value, delData) {
				this.formFieldListApi.forEach((item, index) => {
					if(item.filedId == id){
						item.defaultValue = value
						if(delData){
							item.defaultValueStr = delData
							item.delData = delData
						}
					}
				})
				console.log("formFieldListApi", this.formFieldListApi)
			},
			showValue(id) {
				for(let i=0; i<this.formFieldListApi.length; i++){
					let item = this.formFieldListApi[i];
					if(item.filedId == id){
						// console.log("item.delData",item.delData)
						return item.delData
					}
				}
				// this.formFieldListApi.forEach((item, index) => {
					
				// })
				// return '123'
			}
			
		}
	}
</script>

<style lang="scss">
	.bg_top{
		width: 750rpx;
		background-color: #ffffff;
		position: fixed;
		z-index: 9;
	}
	.z_index{
		z-index: 10;
	}
	.top{
		width: 750rpx;
		height: 48rpx;
		background-color: #FFFFFF;
		position: fixed;
		padding-bottom: 20rpx;
	}
	.top_icon{
		margin-left: 32rpx;
		display: inline-block;
	}
	.top_title{
		position: absolute;
		font-size:34rpx;
		font-weight: 500;
		line-height: 48rpx;
		display: inline-block;
		left: 50%;
		transform: translate(-50%);
	}
	.signUp{
		width: 750rpx;
		overflow-x: hidden;
	}
	
	.signUp_content{
		margin: 0 40rpx;
		padding-bottom: 40rpx ;
	}
	.signUp_content_image{
		display: inline-block;
		vertical-align: top;
	}
	.signUp_content_image image{
		width: 160rpx;
		height: 226rpx;
		margin-top: 40rpx;
	}
	.signUp_content_{
		/* position: relative; */
		width: 480rpx;
		height: 226rpx;
		display: inline-block;
	}
	.signUp_content_title{
		width: 392rpx;
		font-size: 30rpx;
		color: #2d3034;
		font-weight: 700;
		margin: 50rpx 0 0 30rpx;
		display: inline-block;
	}
	.signUp_content_icon{
		position: relative;
		vertical-align: top;
		display: inline-block;
	}
	.signUp_content_icon image{
		width: 62rpx;
		height: 32rpx;
		position: absolute;
		right: -62rpx;
		top: 56rpx;
		vertical-align: top;
	}
	.signUp_content_icon text{
		font-size: 20rpx;
		width: 62rpx;
		height: 32rpx;
		position: absolute;
		right: -73rpx;
		top: 59rpx;
		color: #e63018;
	}
	.signUp_content_details{
		margin: 54rpx 0 0 32rpx;
	}
	
	.content_detailed_time{
	}
	.content_detailed_time image{
		width: 20rpx;
		height: 20rpx;
		display: inline-block;
	}
	.content_detailed_time view{
		color: #606266;
		font-size: 22rpx;
		display: inline-block;
		margin-left: 12rpx;
	}
	.content_detailed_position{
		margin-top: 10rpx;
		position: relative;
	}
	.content_detailed_position image{
		width: 22rpx;
		height: 22rpx;
		vertical-align: top;
		display: inline-block;
	}
	.content_detailed_position view{
		color: #606266;
		font-size: 20rpx;
		display: inline-block;
		margin-left: 12rpx;
		vertical-align: top;
	}
	.splitLine{
		width: 750rpx;
		height: 20rpx;
		background: #f5f6f9;
	}
	.form{
		margin: 0 40rpx 250rpx 40rpx;
	}
	.form_{
		margin-top: 40rpx;
		font-weight: 700;
		font-size: 30rpx;
		position: relative;
	}
	.form_text{
		color: #f10200;
		position: absolute;
		top: -6rpx;
		left: -16rpx;
	}
	.form_input{
		margin-top: 20rpx;
		padding: 20rpx 30rpx 20rpx 30rpx;
		color: #2d3034;
		background: #f5f6f9;
		border-radius: 6px;
		width: 630rpx;
		// height: 84rpx;
		font-size: 30rpx;
	}
	.form_input_checkbox{
		margin-top: 20rpx;
		padding: 20rpx 0 20rpx 0rpx;
		color: #2d3034;
		font-size: 30rpx;
	}
	.form_region{
		display: inline-block;
		position: relative;
	}
	.form_region_image{
		width: 26rpx;
		height: 26rpx;
		position: absolute;
		right: 43rpx;
		top: 50rpx;
	}
	
	.radio{
		margin-top: 30rpx;
		color: #2d3034;
		font-size: 30rpx;
	}
	.radio_{
		display: block;
	}
	.radio_1{
		// color: red !important;
	}
	/deep/ .radio_ .u-radio{
		margin-bottom: 30rpx;
		width: 100% !important;
	}
	/deep/ .data-v-172979f2{
		// top: 100% !important;
		transform: translateY(-15%);
	}
	
	.foot{
		width: 670rpx;
		height: 84rpx;
		padding: 16rpx 40rpx 68rpx 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		bottom: 0;
		z-index: 10;
	}
	.foot_title{
		width: 670rpx;
		height: 84rpx;
		color: #FFFFFF;
		background: #f10200;
		border-radius: 6px;
		line-height: 84rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 700;
	}
	.uni-list-cell {
		position: relative;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.uni-list-cell {
		justify-content: flex-start
	}
	.uni-list-cell-pd {
		padding: 22rpx 30rpx 22rpx 0rpx;
	}
	.image{
		width: 710rpx;
		margin: 40rpx 0 0 40rpx;
		.addBtn_{
			width: 182rpx;
			height: 182rpx;
			.addBtn{
				width: 182rpx;
				height: 182rpx;
				background-color: #F5F6F9;
				text-align: center;
				line-height: 182rpx;
			}
		}
		/deep/ .u-list-item{
			margin-right: 32rpx;
			margin-bottom: 32rpx;
		}
		
		
	}
	/deep/ .u-calendar__action {
		padding: 40rpx 0 40rpx 0;
		display: flex !important;
		justify-content: center !important;
	}
	.textarea{
		width: 630rpx;
		height: 150rpx !important;
		background-color: #F5F6F9;
		margin-top: 20rpx;
		padding: 20rpx 30rpx 20rpx 30rpx;
		border-radius: 12rpx;
	}

	/deep/ .u-radio__label{
		color: #2d3034 !important;
	}
</style>
